<template>
  <div class="globalPandemic">
    <!-- 第一行 -->
    <el-row :gutter="10">
      <el-col :span="6">
        <div class="item">
          <div class="item_title">Last Updated at (M/D/YYYY)</div>
          <div class="item_cont">
            <span>{{dateTime}} 00:00</span>
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="item">
          <div class="item_title">总确诊</div>
          <div class="item_cont">
            <span style="color: red">{{ numFormat(totalConfirm) }}</span>
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="item">
          <div class="item_title">总死亡</div>
          <div class="item_cont"><span>{{ numFormat(totalDead) }}</span></div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="item">
          <div class="item_title">总治愈</div>
          <div class="item_cont"><span>{{ numFormat(totalHeal) }}</span></div>
        </div>
      </el-col>
    </el-row>
    <!-- 第二行 -->
    <el-row :gutter="10" class="main_content">
      <!-- 左侧列表 -->
          <el-col :span="6">
            <div class="item item_two">
              <div class="item_title">今日输入</div>
              <div class="item_cont">
                <span style="color: red">{{numFormat(todayInput)}}</span>
              </div>
            </div>
          </el-col>
      <el-col :span="18">
        <!-- 二行数据 -->
        <el-row :gutter="10">
          <el-col :span="8">
            <div class="item item_two">
              <div class="item_title">今日确诊</div>
              <div class="item_cont">
                <span style="color: red">{{numFormat(todayConfirm)}}</span>
              </div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="item item_two">
              <div class="item_title">今日死亡</div>
              <div class="item_cont">
                <span>{{numFormat(todatDead)}}</span>
              </div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="item item_two">
              <div class="item_title">今日治愈</div>
              <div class="item_cont">
                <span>{{numFormat(todayHeal)}}</span>
              </div>
            </div>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
    <el-row class="line3">
      <img src="../../assets/img/bcg.png" alt="">
    </el-row>
  </div>
</template>
<script setup>
// import tools from '@/utils/tools.js'
import { ref, computed, reactive, getCurrentInstance, onMounted } from "vue";
import { getWorldData, getWorldTotalNum, getCovidWorld,getCovidProvince,getAllCountryNum} from "@/api";
import tools from "../../utils/tools";
const {
  appContext: {
    config: { globalProperties },
  },
} = getCurrentInstance();
let echarts = reactive(globalProperties.$echarts);
let worldData = []
// 数字千位分隔符
let numFormat = (num) => {
  return tools.numFormat(num);
};
let dateTime = ref(new Date().toLocaleDateString()) 
let countryList = reactive({data: []});
let countryData = reactive({data: []});
let totalConfirm = ref(0)
let totalDead = ref(0)
let totalHeal = ref(0)

let todayConfirm = ref(0)
let todatDead = ref(0)
let todayHeal = ref(0)
let todayInput = ref(0)
onMounted(() => {
  // getWorldMap()
  getWData();
  getWorldTotalNum1()
});
let getWData = () => {

};
let getWorldTotalNum1 = () => {
  getAllCountryNum().then(res => {
    console.log(res,'getAllCountryNum')
    countryData.data = res.data.data
    totalConfirm.value = countryData.data[0].total_confirm
    totalHeal.value = countryData.data[0].total_heal
    totalDead.value = countryData.data[0].total_dead

    todayInput.value = countryData.data[0].today_input
    todayConfirm.value = countryData.data[0].today_confirm
    todatDead.value = countryData.data[0].today_dead
    todayHeal.value = countryData.data[0].today_heal
    console.log(todayInput.value,todayConfirm.value )
// "2023-03-05T02:48:21.113Z"
// id
// : 
// 3
// last_update_time
// : 
// "2022-12-28 00:00:36"
// today_confirm
// : 
// "46184"
// today_dead
// : 
// "78"
// today_heal
// : 
// "5552"
// today_input
// : 
// "116"
// total_confirm
// : 
// "9506895"
// total_dead
// : 
// "31509"
// total_heal
// : 
// "468612"
// total_input
  })
}
</script>
<style lang='scss' scoped>
.line3 {
    height: 60%;
    // padding: 30px;
  img {
    height: 100%;
    width: 100%;
    display: block;
  }
}
.el-row {
  margin-bottom: 20px;
}
.el-row:last-child {
  margin-bottom: 0;
}
.el-col {
  border-radius: 4px;
  color: #380303;
}
.globalPandemic {
  width: 100%;
  height: 100%;
  background: rgb(113, 113, 113);
}
.map_content {
  width: 100%;
  height: calc(100% - 100px);
  #map {
    height: 100%;
    width: 100%;
    //  height: 500px;
    //  width: 500px;
  }
}
.item {
  width: 100%;
  height: 90px;
  background: rgb(43,43,43);
  color: #fff;
  padding-bottom: 5px;
  .item_title {
    height: 18px;
    width: 100%;
    text-align: center;
    line-height: 18px;
    font-size: 13px;
  }
  .item_cont {
    height: calc(100% - 15px);
    font-size: 38px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
  }
}
.main_content {
  // height: calc(100% - 100px);
  .left_list {
    height: 100%;
    display: flex;
    flex-direction: column;
    .country_list {
      width: 100%;
      // height: 400px;
      height: 100%;
      // overflow-y: scroll;
      overflow: hidden;
      .country_list_item {
        color: #fff;
        background: rgb(43,43,43);
        padding: 8px;
          border-bottom: 1px silver solid;
        .country_item {
          text-align: left;
          line-height: 23px;
        }
      }
    }
  }
}
.element::-webkit-scrollbar {
  width: 0 !important;
}
.element {
  -ms-overflow-style: none;
}
.element {
  overflow: -moz-scrollbars-none;
}
.item_two {
  height: 65px;
  .item_cont {
    font-size: 30px;
  }
}
</style>
